<!DOCTYPE html>{__NOLAYOUT__}
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>A</title>
	<link rel="stylesheet" href="__PUBLIC__/materialize/css/materialize.min.css" media="screen,projection" />
    <link href="__PUBLIC__/css/bootstrap.css" rel="stylesheet" />
	<link rel="stylesheet" href="__PUBLIC__/js/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css" />

	<link rel="stylesheet" href="__PUBLIC__/js/DataTables-1.10.0/media/css/jquery.dataTables.min.css">
	<link href="__PUBLIC__/css/custom-styles.css" rel="stylesheet" />

	<script src="__PUBLIC__/js/jquery-3.4.1.js"></script>
	<script type="text/javascript" src="__PUBLIC__/js/zTree_v3/js/jquery.ztree.all-3.5.min.js"></script>
	<script src="__PUBLIC__/js/tool.js"></script>
	<script src="__PUBLIC__/js/layer/src/layer.js"></script>

	
	<style type="text/css">
		body{
			background:#ffffff;
			-moz-user-select: none;
		}
		ul.aya-tab-ul1{
			border-bottom:1px solid #e2e2e2
		}
		ul.aya-tab-ul1 li{
			display:inline-block;
			border-bottom:2px solid #ffffff;
			width:80px;
			font-size:12px;
			text-align:center;
			padding:6px 2px;
			margin:0;
			cursor:default;
			color:#6e6e6e
		}
		ul.aya-tab-ul1 li.select{
			border-bottom-color:#17abe3;
			color:#353535
		}

		.aya-tab-content{
			display:none
		}
		
		#aya-tabl-selected,.aya-tab-content-top,.aya-tab-content-buttom{
			overflow-y:scroll
		}
		
		.aya-tab-content-mid p{
			display:inline-block;
			margin-right:50px
		}
		.aya-tab-content-research input{
			width:90% !important;
			text-indent:32px !important
		}
		.aya-tab-content-research{
			
		}
		.aya-tab-content-research img{
			position:absolute;
			top:2px;
			right:10px;
			width:18px
		}

		#save_as_group{
			display:inline-block;cursor:pointer;font-size:12px;color:#0e932e;height:32px;line-height:32px;
			border-radius:5px;padding-left:2px;padding-right:2px;
			border:1px solid #ffffff
		}
		#save_as_group:hover{
			background:#ffdb91;
			border:1px solid #ff9900
		}
		
		.aya-tab-confirm p{
			display:inline-block;
			margin-right:50px;
			color:#ffffff;
	
			height:50px;
			line-height:50px
		}
		.aya-tab-confirm p label{
			color:#ffffff;

		}
		ul.post li{
			font-size:12px;
			padding:2px 40px ;
		}
		ul.group li{
			font-size:12px;
			padding:2px 40px ;
			position:relative;
		}
		ul.x li{
			font-size:12px;
			padding:2px 40px ;
		}
		ul.group li img{
			position:absolute;
			right:0;
			top:2px;
			width:16px;
			display:none;
			cursor:pointer;
		}
		li.li-selected{
			background:#e8e8e8
		}
	</style>
</head>
<body>

<div class = 'row' style = 'margin:0'>
	<div class = 'col s12' id = 'tab'>
		<ul class = 'aya-tab-ul1'>
			<li data-index = '1' >部门</li>
			<li data-index = '2' >组</li>
			<li data-index = '3' >岗位</li>
			<li data-index = '4' >相对角色</li>
		</ul>
	</div>
	<div class = 'col s6 aya-tab-content'  data-index = '1' >
		<div class = 'aya-tab-content-research'>
			<span style = 'position:relative'>
				<input type = 'text' class = 'browser-default aya-input' placeholder = '搜索姓名' id = 'research1'/>
				<img src = '__PUBLIC__/image/search.png' class = 'height18' />
			</span>
			

		</div>
		<div class = 'aya-tab-content-top'>
			<ul id="tree" class="ztree"></ul>
		</div>
		<div class = 'aya-tab-content-mid bg-success' style = 'height:32px;line-height:32px;padding-left:64px'>
			
			<p>
				<input name="group1" type="radio" id="test1"  data-type = '1' checked/>
				<label for="test1">人员</label>
			</p>
			<p>
				<input name="group1" type="radio" id="test2" data-type = '2' />
				<label for="test2">角色</label>
			</p>

		</div>

		<div class = 'aya-tab-content-buttom'>
			<table class = 'dataTable table-small centered hover' style = 'table-layout:fixed'>
				<tbody id = 'p_flow_select_tbody1'>
					
				</tbody>
			</table>
		</div>


	</div>

	<div class = 'col s6 aya-tab-content'  data-index = '2' >
		<div class = 'aya-tab-content-research'>
			<span style = 'position:relative'>
				<input type = 'text' class = 'browser-default aya-input' placeholder = '搜索组名' id = 'research2'/>
				<img src = '__PUBLIC__/image/search.png'  class = 'height18'/>
			</span>
		</div>
		<div class = 'aya-tab-content-top'>
			<ul class = 'group' id = 'group'>
				

			</ul>
		</div>
		<div class = 'aya-tab-content-mid bg-success' style = 'height:32px;line-height:32px;padding-left:64px'>
			
			<p style = 'font-size:12px;color:#868686'>
				组成员名单
			</p>
			

		</div>

		<div class = 'aya-tab-content-buttom'>
			<table class = 'dataTable table-small centered hover' style = 'table-layout:fixed'>
				<tbody id = 'p_flow_select_tbody2'>
					
				</tbody>
			</table>
		</div>
	</div>

	<div class = 'col s6 aya-tab-content'  data-index = '3' >
		<div class = 'aya-tab-content-research'>
			<span style = 'position:relative'>
				<input type = 'text' class = 'browser-default aya-input' placeholder = '搜索岗位' id = 'research3'/>
				<img src = '__PUBLIC__/image/search.png' class = 'height18' />
			</span>
		</div>
		<div class = 'aya-tab-content-top'>
			<ul class = 'post' id = 'post'>
				

			</ul>
		</div>
		<div class = 'aya-tab-content-mid bg-success' style = 'height:32px;line-height:32px;padding-left:64px'>
			
			<p style = 'font-size:12px;color:#868686'>
				岗位员工
			</p>
			

		</div>

		<div class = 'aya-tab-content-buttom'>
			<table class = 'dataTable table-small centered hover' style = 'table-layout:fixed'>
				<tbody id = 'p_flow_select_tbody3'>
					
				</tbody>
			</table>
		</div>
	</div>

	<div class = 'col s6 aya-tab-content'   data-index = '4' >
		<div class = 'aya-tab-content-research'>
			<span style = 'position:relative'>
				<input type = 'text' class = 'browser-default aya-input' placeholder = '' id = 'research3'/>
				<img src = '__PUBLIC__/image/search.png' class = 'height18' />
			</span>
		</div>
		<div class = 'aya-tab-content-top' style = 'overflow-y:hidden'>
			<ul class = 'x' id = 'x'>
				
				<li data-id = '1'>发起者部门主管</li>
				<li data-id = '2'>发起者部门分管领导</li>
				<li data-id = '3'>执行者部门主管</li>
				<li data-id = '4'>执行者部门分管领导</li>
				<li data-id = '9'>空节点</li>
			

			</ul>
		</div>
		<div class = 'aya-tab-content-mid ' style = 'height:32px;line-height:32px;padding-left:64px'>
			
			<p style = 'font-size:12px;'>
				
			</p>
			

		</div>

		<div class = 'aya-tab-content-buttom' style = 'overflow-y:hidden'>
			
		</div>
	</div>

	<div class = 'col s6 aya-tab-select' id = 'aya-tabl-selected'>
		<div style = 'border-bottom:1px solid #d0d0d0'>
			<div id = 'save_as_group'>
			<!--
				<img src = '{Think.config.templete_public}/Image/o60.png'  class = 'icon4' style = '' />
				保存为组
			-->
			</div>
		</div>
		<table class = 'dataTable table-small centered hover stripe row-border' style = 'table-layout:fixed'>	
			<tbody id = 'p_flow_selected_tbody'>
					
			</tbody>
		</table>
	</div>
	
	<div class = 'col s12 aya-tab-confirm' style = 'height:50px;background:#f4f4f4'>
		<div class = 'row' style = 'margin:0'>
			<div class = 'col s10'>
				
			</div>
			<div class = 'col s2' style = 'line-height:50px'>
					<button class = 'btn btn-primary height32' id = 'flow_confirm'>确定</button>
					<button class = 'btn btn-default height32'>取消</button>
			</div>
		</div>
	</div>

</div>
</tbody>
<script>

	let addBranchStatus = '{$Request.get.addbranch}';

	

	if(addBranchStatus == 1){
		$('#test3').prop('checked',true);
		$('#test4').parent().hide();
	}

	let height = ($(window).height() - $('#tab').height() -  24 - 50 - 50 ) / 2;
	let height2 = $(window).height() - $('#tab').height() - 12 - 50;
	
	$('.aya-tab-content-top').css('minHeight',height).css('maxHeight',height);
	$('.aya-tab-content-buttom').css('minHeight',height).css('maxHeight',height);
	$('#aya-tabl-selected').css('minHeight',height2).css('maxHeight',height2);

	$('ul.aya-tab-ul1 li').click(function(){
		$('ul.aya-tab-ul1 li').removeClass('select');
		$(this).addClass('select');
		$('.aya-tab-content').hide();
		let index = $(this).data('index');
		$('.aya-tab-content').each(function(){
			if($(this).data('index') == index) $(this).show();
		});
	});
	$('ul.aya-tab-ul1 li').eq(0).addClass('select');
	$('.aya-tab-content').eq(0).show();
	
	$('#p_flow_select_tbody1').on('click','tr',function(){
		add(this);
	});

	$('#p_flow_select_tbody2').on('click','tr',function(){
		add(this);
	});

	$('#p_flow_select_tbody3').on('click','tr',function(){
		add(this);
	});

	function add(tr){
		let number = $(tr).children().eq(0).text();
		let name   = $(tr).children().eq(1).text();
		let type   = $(tr).data('type');
		
		let flag = false;
		
		$('#p_flow_selected_tbody tr').each(function(){
			if($(this).children().eq(2).text() == type && $(this).children().eq(1).text() == name){
				flag = true;
				return false
			}
		});
		if(flag == true) return false;

		if(type == '个人'){
			$('#p_flow_selected_tbody').append("<tr><td>"+number+"</td><td>"+name+"</td><td>个人</td></tr>");
		}else if(type == '角色'){
			$('#p_flow_selected_tbody').append("<tr data-id = '"+$(tr).data('id')+"' ><td>"+number+"</td><td>"+name+"</td><td>角色</td></tr>");
		}else{
			
		}
		
		
			
	}

	let zNodes = {$tree|raw};
	var setting = {
		callback:{
			onClick:function(event, treeId, treeNode){
				var o = {};

				$this.depId   = treeNode.id;
				$this.dep_name = treeNode.name;
				$this.query();
			},
			onDblClick:function(event, treeId, treeNode){
				let bmName = treeNode.name;
				let bmId = treeNode.bmid;
				
				if(treeNode.children == undefined){
					$('#p_flow_selected_tbody').append("<tr data-id = '"+bmId+"|0' ><td></td><td>"+bmName+"</td><td>部门</td></tr>");
				}else{
					layer.alert('是否包括子部门', {
						icon: 3,
						offset: ['20%'],
						btn : ['是','否'],
						yes : function(index, layero){
							$('#p_flow_selected_tbody').append("<tr data-id = '"+bmId+"|1' ><td>包括子部门</td><td>"+bmName+"</td><td>部门</td></tr>");
							layer.close(index);
						},
						btn2: function(){
							$('#p_flow_selected_tbody').append("<tr data-id = '"+bmId+"|0' ><td>不包括子部门</td><td>"+bmName+"</td><td>部门</td></tr>");
						},

					});
				}

				
			}
		}
	};
	zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
	var treeObj = $.fn.zTree.getZTreeObj("tree");
	treeObj.expandNode(treeObj.getNodeByTId("tree_1"), true, false, false);

	//$("input[name='rd']:checked").val();

	$("input[name='group1']").click(function(){
		$this.type = $("input[name='group1']:checked").data('type');
		$this.query();
	});

	$('#research1').keypress(function(e){
		if(e.keyCode == 13){
			
			let keyword = $.trim($('#research1').val());
			

			if(keyword != ''){
				let o = {};
				o.w = { name:['like','%' + keyword + '%'],active:['=',1]};
				o.f = 'number,name,gw';

				$.post('__APP__/index/Get/get_employees',o,function(d){
					$('#p_flow_select_tbody1').empty();
					let tmp = '';
					for(let i in d){
						tmp += "<tr data-type = '个人'><td>"+d[i]['number']+"</td><td>"+d[i]['name']+"</td><td>"+d[i]['gw']+"</td></tr>";
					}
					$('#p_flow_select_tbody1').append(tmp);
				});
			}
		}
	});

	$('#research3').keypress(function(e){
			
		if(e.keyCode == 13){
			let o = {};
			o.keyword = $.trim($('#research3').val());
		
			$.post('__URL__/search_post',o,function(d){
				$('#post').empty();
				let tmp = '';
				for(let i in d.data){
					tmp += "<li data-id = '"+d.data[i]['id']+"'>"+d.data[i]['name']+"</li>";
				}
				$('#post').append(tmp);
			});
			
		}
	});

	$('#p_flow_selected_tbody').on('dblclick','tr',function(){
		$(this).remove();
	});

	
	$('ul#post').on('dblclick','li',function(){
		let post = $(this).text();
		let flag = false;
		let id = $(this).data('id');
		$('#p_flow_selected_tbody tr').each(function(){
			if($(this).children().eq(1).text() == post ){
				flag = true;
				return false
			}
		});
		if(flag == true) return false;
		$('#p_flow_selected_tbody').append("<tr data-id = '"+id+"' data-type = '岗位' ><td>-</td><td>"+post+"</td><td>岗位</td></tr>");
	});
	

	$('ul#post').on('click','li',function(){
		$('ul#post li').removeClass('li-selected');
		$(this).addClass('li-selected');	
		let post = $(this).text();
		let o = {post:post};
		$.post('__URL__/get_employee_by_post',o,function(d){
			$('#p_flow_select_tbody3').empty();
			let tmp = '';
			for(let i in d.data){
				tmp += "<tr data-type = '个人'><td>"+d.data[i]['number']+"</td><td>"+d.data[i]['name']+"</td><td>"+d.data[i]['gw']+"</td></tr>";
			}
			$('#p_flow_select_tbody3').append(tmp);
		});
	});

	$('ul#group').on('dblclick','li',function(){
		let post = $(this).text();
		let flag = false;
		let id = $(this).data('id');
		$('#p_flow_selected_tbody tr').each(function(){
			if($(this).children().eq(1).text() == post ){
				flag = true;
				return false
			}
		});
		if(flag == true) return false;
		$('#p_flow_selected_tbody').append("<tr data-id = '"+id+"' data-type = '组' ><td>-</td><td>"+post+"</td><td>组</td></tr>");
	});
	
	$('ul#group').on('click','li',function(){
		$('ul#group li').removeClass('li-selected');
		$(this).addClass('li-selected');
		let id = $(this).data('id');
		let o = {id:id};
		$.post('__URL__/get_employee_by_group',o,function(d){
			$('#p_flow_select_tbody2').empty();
			let tmp = '';
			for(let i in d.data){
				if(d.data[i]['type'] == 'P'){
					tmp += "<tr data-type = '个人'><td>"+d.data[i]['number']+"</td><td>"+d.data[i]['name']+"</td><td>"+d.data[i]['gw']+"</td></tr>";
				}if(d.data[i]['type'] == 'R'){
					tmp += "<tr data-type = '角色' data-id = '"+d.data[i]['number']+"' ><td>"+d.data[i]['name']+"</td><td>"+(d.data[i]['value']=='B'?'部门主管':'分管领导')+"</td><td></td></tr>";
					
				}
			}
			$('#p_flow_select_tbody2').append(tmp);
		});
	});

	$('ul#group').on('mouseenter','li',function(){
		$(this).find('img').show();
	});

	$('ul#group').on('mouseleave','li',function(){
		$(this).find('img').hide();
	});

	

	$('ul#x').on('dblclick','li',function(){
		let x = $(this).text();
		let flag = false;
		let id = $(this).data('id');
		$('#p_flow_selected_tbody tr').each(function(){
			if($(this).children().eq(1).text() == x ){
				flag = true;
				return false
			}
		});
		if(flag == true) return false;
		$('#p_flow_selected_tbody').append("<tr data-id = '"+id+"' data-type = '相对角色' ><td>-</td><td>"+x+"</td><td>相对角色</td></tr>");
	});


	let $this = {
		type  : 1,  //部门还是人员
		depId : 0,  //选择部门的ID
		dep_name : '',
		
		query : function(){
			if($this.depId == 0) return false;
			$('#p_flow_select_tbody1').empty();
			let o = {dep_id:$this.depId};

			

			if($this.type == 1){
				
				$.post('__APP__/PublicGet/get_employee_by_dept_id',o,function(d){
					
					
					
					let tmp = '';
					for(let i in d.data){
						
						tmp += "<tr data-type = '个人'><td>"+d.data[i]['number']+"</td><td>"+d.data[i]['name']+"</td><td>"+d.data[i]['pname']+"</td></tr>";
					}
					$('#p_flow_select_tbody1').append(tmp);
				});
			}else if($this.type == 2){
				let tmp = "<tr data-type = '角色' data-id = '"+$this.depId+"' ><td>"+$this.dep_name+"</td><td>部门主管</td></tr><tr data-type = '角色'><td>"+$this.dep_name+"</td><td>分管领导</td></tr>";
				$('#p_flow_select_tbody1').append(tmp);
			}	
		}
	};

	$('#flow_confirm').click(function(){

		let type = $("input[name='group2']:checked").data('type');

		let node = [];

		$('#p_flow_selected_tbody tr').each(function(){
			let tmp = {};
			if($(this).children().eq(2).text() == '个人'){
				tmp.T  = 'P';
				tmp.K   = $(this).children().eq(0).text();
				tmp.V = $(this).children().eq(1).text();
				tmp.info = tmp.V;
			}else if($(this).children().eq(2).text() == '角色'){
				tmp.T = 'R';
				tmp.K   = $this.depId;
				tmp.V = $(this).children().eq(1).text() == '部门主管'?'B':'F';
				tmp.B = $(this).children().eq(0).text();
				tmp.info = tmp.B + $(this).children().eq(1).text();
			}else if($(this).children().eq(2).text() == '岗位'){
				
				tmp.T = 'G';
				tmp.K   = $(this).data('id');
				tmp.V = $(this).children().eq(1).text();
				tmp.info = tmp.V + '（岗位）';
				
			}else if($(this).children().eq(2).text() == '组'){
				
				tmp.T = 'Z';
				tmp.K   = $(this).data('id');
				tmp.V = $(this).children().eq(1).text();
				tmp.info = tmp.V + '（组）';
				
			}else if($(this).children().eq(2).text() == '部门'){
				tmp.T = 'D';
				tmp.K   = $(this).data('id');
				tmp.V = $(this).children().eq(1).text();
				tmp.info = tmp.V + '（部门）';
				log(tmp);
			}else if($(this).children().eq(2).text() == '相对角色'){
				tmp.T = 'X';
				tmp.K  = $(this).data('id');
				if(tmp.K == '1' || tmp.K == '2'){
					tmp.V = $(this).children().eq(2).text();
					if(tmp.K == 1) tmp.info = '发起者部门主管';
					if(tmp.K == 2) tmp.info = '发起者部门分管领导';
				}else if(tmp.K == '3' || tmp.K == '4'){
					tmp.V = $(this).children().eq(2).text();
					if(tmp.K == 3) tmp.info = '执行者部门主管';
					if(tmp.K == 4) tmp.info = '执行者部门分管领导';
				}else if(tmp.K == '9'){
					tmp.V = '空';
					tmp.info = '空节点';
				}
			}
				
			node.push(tmp);

		});
		
		top[top.mainPage.tmp.find('iframe')[0]['name']].app.set_node(node);
	
		let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
		parent.layer.close(index); //再执行关闭   
	
	});




</script>
</html>


